﻿<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hui-Hybrid.js</title>
    <link rel="stylesheet" type="text/css" href="../../../css/Hui.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/iconfont/iconfont.css" />
    <style type="text/css">
    </style>
</head>
<body>
    <div class="H-title-channel">
        <span class="H-bold-line"></span><label class="H-label-text">样式一</label>
    </div>
    <div class="H-list">
        <div class="H-list-item H-flexbox-horizontal" tapmode="">
            <p class="H-text H-flex-item">列表一</p>
        </div>
        <div class="H-list-item H-flexbox-horizontal" tapmode="">
            <p class="H-text H-flex-item">列表二</p>
        </div>
        <div class="H-list-item H-flexbox-horizontal" tapmode="">
            <p class="H-text H-flex-item">列表三</p>
        </div>
    </div>
    <p class="H-margin-bottom10"></p>
    <div class="H-title-channel">
        <span class="H-bold-line"></span><label class="H-label-text">样式二</label>
    </div>
    <div class="H-list">
        <div class="H-list-item H-flexbox-horizontal" tapmode="">
            <p class="H-text H-flex-item">列表一</p>
            <span class="H-icon H-arrow"><i class="iconfont icon-jiantou"></i></span>
        </div>
        <div class="H-list-item H-flexbox-horizontal" tapmode="">
            <p class="H-text H-flex-item">列表二</p>
            <span class="H-icon H-arrow"><i class="iconfont icon-jiantou"></i></span>
        </div>
        <div class="H-list-item H-flexbox-horizontal" tapmode="">
            <p class="H-text H-flex-item">列表三</p>
            <span class="H-icon H-arrow"><i class="iconfont icon-jiantou"></i></span>
        </div>
    </div>
    <p class="H-margin-bottom10"></p>
    <div class="H-title-channel">
        <span class="H-bold-line"></span><label class="H-label-text">样式三</label>
    </div>
    <div class="H-list H-list-theme1">
        <div class="H-list-item H-flexbox-horizontal" tapmode="">
            <p class="H-text H-flex-item">列表一</p>
            <span class="H-icon H-arrow"><i class="iconfont icon-jiantou"></i></span>
        </div>
        <div class="H-list-item H-flexbox-horizontal" tapmode="">
            <p class="H-text H-flex-item">列表二</p>
            <span class="H-icon H-arrow"><i class="iconfont icon-jiantou"></i></span>
        </div>
        <div class="H-list-item H-flexbox-horizontal" tapmode="">
            <p class="H-text H-flex-item">列表三</p>
            <span class="H-icon H-arrow"><i class="iconfont icon-jiantou"></i></span>
        </div>
    </div>
    <p class="H-margin-bottom10"></p>
    <div class="H-title-channel">
        <span class="H-bold-line"></span><label class="H-label-text">样式四</label>
    </div>
    <div class="H-list H-horizontal-margin10">
        <div class="H-list-item H-flexbox-horizontal" tapmode="">
            <p class="H-text H-flex-item">列表一</p>
            <span class="H-icon H-arrow"><i class="iconfont icon-jiantou"></i></span>
        </div>
        <div class="H-list-item H-flexbox-horizontal" tapmode="">
            <p class="H-text H-flex-item">列表二</p>
            <span class="H-icon H-arrow"><i class="iconfont icon-jiantou"></i></span>
        </div>
        <div class="H-list-item H-flexbox-horizontal" tapmode="">
            <p class="H-text H-flex-item">列表三</p>
            <span class="H-icon H-arrow"><i class="iconfont icon-jiantou"></i></span>
        </div>
    </div>
    <p class="H-margin-bottom10"></p>
    <div class="H-title-channel">
        <span class="H-bold-line"></span><label class="H-label-text">样式四</label>
    </div>
    <div class="H-list  H-list-theme2 H-horizontal-margin10">
        <div class="H-list-item H-flexbox-horizontal" tapmode="">
            <p class="H-text H-flex-item">列表一</p>
            <span class="H-icon H-arrow"><i class="iconfont icon-jiantou"></i></span>
        </div>
        <div class="H-list-item H-flexbox-horizontal" tapmode="">
            <p class="H-text H-flex-item">列表二</p>
            <span class="H-icon H-arrow"><i class="iconfont icon-jiantou"></i></span>
        </div>
        <div class="H-list-item H-flexbox-horizontal" tapmode="">
            <p class="H-text H-flex-item">列表三</p>
            <span class="H-icon H-arrow"><i class="iconfont icon-jiantou"></i></span>
        </div>
    </div>
    <p class="H-margin-bottom10"></p>
    <div class="H-title-channel">
        <span class="H-bold-line"></span><label class="H-label-text">样式五</label>
    </div>
    <div class="H-list H-list-theme1">
        <div class="H-list-item H-flexbox-horizontal" tapmode="">
            <span class="H-icon"><i class="iconfont icon-me-copy"></i></span>
            <p class="H-text H-flex-item">列表一</p>
            <span class="H-icon H-arrow"><i class="iconfont icon-jiantou"></i></span>
        </div>
        <div class="H-list-item H-flexbox-horizontal" tapmode="">
            <span class="H-icon"><i class="iconfont icon-shezhi"></i></span>
            <p class="H-text H-flex-item">列表二</p>
            <span class="H-icon H-arrow"><i class="iconfont icon-jiantou"></i></span>
        </div>
        <div class="H-list-item H-flexbox-horizontal" tapmode="">
            <span class="H-icon"><i class="iconfont icon-wendang"></i></span>
            <p class="H-text H-flex-item">列表三</p>
            <span class="H-icon H-arrow"><i class="iconfont icon-jiantou"></i></span>
        </div>
    </div>
    <p class="H-margin-bottom10"></p>
    <div class="H-title-channel">
        <span class="H-bold-line"></span><label class="H-label-text">样式六</label>
    </div>
    <div class="H-list H-list-theme1">
        <div class="H-list-item H-flexbox-horizontal" tapmode="">
            <span class="H-icon block"><i class="iconfont icon-me-copy"></i></span>
            <p class="H-text H-flex-item">列表一</p>
            <span class="H-icon H-arrow"><i class="iconfont icon-jiantou"></i></span>
        </div>
        <div class="H-list-item H-flexbox-horizontal" tapmode="">
            <span class="H-icon block"><i class="iconfont icon-shezhi"></i></span>
            <p class="H-text H-flex-item">列表二</p>
            <span class="H-icon H-arrow"><i class="iconfont icon-jiantou"></i></span>
        </div>
        <div class="H-list-item H-flexbox-horizontal" tapmode="">
            <span class="H-icon block"><i class="iconfont icon-wendang"></i></span>
            <p class="H-text H-flex-item">列表三</p>
            <span class="H-icon H-arrow"><i class="iconfont icon-jiantou"></i></span>
        </div>
    </div>
    <p class="H-margin-bottom10"></p>
    <div class="H-title-channel">
        <span class="H-bold-line"></span><label class="H-label-text">样式七</label>
    </div>
    <div class="H-list">
        <div class="H-list-item H-flexbox-horizontal" tapmode="">
            <p class="H-text H-flex-item">一切从简，只为了更懒！让APCloud再飞一会吧！</p>
            <span class="H-icon H-arrow"><i class="iconfont icon-jiantou"></i></span>
        </div>
        <div class="H-list-item H-flexbox-horizontal" tapmode="">
            <p class="H-text H-flex-item">一切从简，只为了更懒！让APCloud再飞一会吧！</p>
            <span class="H-icon H-arrow"><i class="iconfont icon-jiantou"></i></span>
        </div>
        <div class="H-list-item H-flexbox-horizontal" tapmode="">
            <p class="H-text H-flex-item">一切从简，只为了更懒！让APCloud再飞一会吧！</p>
            <span class="H-icon H-arrow"><i class="iconfont icon-jiantou"></i></span>
        </div>
    </div>
    <p class="H-margin-bottom10"></p>
    <div class="H-title-channel">
        <span class="H-bold-line"></span><label class="H-label-text">样式八</label>
    </div>
    <div class="H-list">
        <div class="H-list">
            <div class="H-list-item H-flexbox-horizontal" tapmode="">
                <p class="H-text H-flex-item">列表一</p>
                <span class="H-badge"><label>23</label></span>
                <span class="H-icon H-arrow"><i class="iconfont icon-jiantou"></i></span>
            </div>
            <div class="H-list-item H-flexbox-horizontal" tapmode="">
                <p class="H-text H-flex-item">列表二</p>
                <span class="H-badge"><label>99</label></span>
                <span class="H-icon H-arrow"><i class="iconfont icon-jiantou"></i></span>
            </div>
            <div class="H-list-item H-flexbox-horizontal" tapmode="">
                <p class="H-text H-flex-item">列表三</p>
                <span class="H-badge"><label>有更新</label></span>
                <span class="H-icon H-arrow"><i class="iconfont icon-jiantou"></i></span>
            </div>
        </div>
    </div>
    <p class="H-margin-bottom10"></p>
    <div class="H-title-channel">
        <span class="H-bold-line"></span><label class="H-label-text">样式九</label>
    </div>
    <div class="H-list">
        <div class="H-list">
            <div class="H-list-item H-flexbox-horizontal" tapmode="">
                <p class="H-text H-flex-item">列表一</p>
                <input type="checkbox" checked class="H-form-switch" />
            </div>
            <div class="H-list-item H-flexbox-horizontal" tapmode="">
                <p class="H-text H-flex-item">列表二</p>
                <input type="checkbox" class="H-form-checkbox-radio">
            </div>
            <div class="H-list-item H-flexbox-horizontal" tapmode="">
                <p class="H-text H-flex-item">列表三</p>
                <input type="checkbox" class="H-form-switch" />
            </div>
        </div>
    </div>
    <br />
    <br />
    <br />
    <script type="text/javascript" src="../../../script/Hybrid.js"></script>
    <script type="text/javascript"></script>
</body>
</html>